<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/register.css">
    
</head>
<body>
    <div class="topwrap">
        <div class="top">
                <div class="left">
                    <span><img src="../images/star.png" alt=""></span>
                    <a href="#">收藏商城</a>
                </div>
                <div class="right">
                    <p>您好！欢迎来到商城!</p>
                    <a href="../page/login.html">[登录]</a>
                    <a href="../page/register.html">[免费注册]</a>
                </div>

            </div>
    </div>
    <div class="headerwrap">
        <div class="header">
            <img src="../images/zhongjiuloginlog.png" alt="" width="434px">
            <h2>欢迎注册</h2>
        </div>
    </div>
    <div class="conwrap">
        <div class="content">
            <p>我已经注册，现在就<a href="">登录</a></p>
            <form action="" class="list">

                <!-- 手机号码 -->
                <div class="phone">
                    <!-- 左侧文本及输入部分 -->
                    <div class="ph-con">
                        手机号码：<input type="text" name="" id="phonenum">
                        <i></i>
                    </div>
                    <!-- 右侧提示信息部分 -->
                    <div class="ph-message">
                        <p>请输入手机号码</p>
                        <p>请输入正确的手机号码</p>
                    </div>
                </div>

                <!-- 滑块验证部分 -->
                <p class="wenben">滑块验证：</p>
                <div class="box">
                        <div class="btn">>></div>
                        <p class="text">请按住滑块 拖到最右边</p>
                        <div class="bg"></div>
                </div>

                <!-- 设置密码部分 -->
                <div class="setmi">
                     <!-- 左侧文本及输入部分 -->
                    <div class="sm-con">
                        设置密码：<input type="password" id="pass"><br>
                        <i></i>
                    </div>
                    <!-- 右侧提示信息部分 -->
                    <div class="sm-message">
                        <p>6-20位字符，可使用字母、数字或符号的组合,不建议使用纯字母、纯数字、纯符号</p>
                        <p>密码长度只能在6-20位字符之间，不包含空格</p>
                    </div>
                </div>

                <!-- 确认密码部分 -->
                <div class="checkmi">
                    <!-- 左侧文本及输入部分 -->
                    <div class="cm-con">
                        确认密码：<input type="password" id="checkpass"><br>
                        <i></i>
                    </div>
                    <!-- 右侧提示信息部分 -->
                    <div class="cm-message">
                        <p>请再次输入密码</p>
                        <p>两次密码不一致</p>
                    </div>
                </div>
                <!-- 勾选协议部分 -->
                <div class="checkpro">
                    <!-- 勾选部分 -->
                    <div class="cp-con">
                        <input type="checkbox" name="" id="checkbox">
                        <span>我已阅读并同意《<a href="">用户注册协议</a>》</span>
                    </div>
                    <div class="cp-message">
                        <p>请仔细阅读并同意以上协议</p>
                    </div>
                </div>
                <input type="button" value="" id="regbtn">
            </form>
        </div>
    </div>
    
    <div class="footer">Copyright©2004-2015   中酒网  版权所有</div>

    <script src="../js/jquery-1.11.3.js"></script>
    <script src="ajax01.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        // 验证各个格式都是否通过
        var flagphone = false;
        var flagpass = false;
        var flagcheckpass = false;
        var flagcheckbox = false;
        var flagbox = false;
        
        // 手机号校验函数
         function checkform(id,cname){
            //  取输入的内容
            let val = $("#"+id).val();
            let re = /^(1[35789][0-9]{9})$/;
            if (re.test(val)==false) {
                // 错误信息出现 提示信息消失
                $(cname+" p").eq(1).css({"border-color":"red","color":"red"}).show().siblings().hide();
                flagphone = false;
            }
            if (re.test(val)==true) {
                $(cname+" p").hide();
                flagphone = true;
            }
        }
        // 密码校验函数
        // var reg = /^(?=\S*[a-z])(?=\S*\d)\S{8,}$/;
        function checkmi(id,cname){
            //  取输入的内容
            let val = $("#"+id).val();
            // 纯数字、字母、特殊字符
            let re =  /^[^\s]{6,20}$/;
            if (re.test(val)==false) {
                // 错误信息出现 提示信息消失
                $(cname+" p").eq(1).css({"border-color":"red","color":"red"}).show().siblings().hide();
                flagpass = false;
            }
            if (re.test(val)==true) {
                $(cname+" p").hide();
                flagpass = true;
            }
            // console.log(val,re.test(val));
        }
        // 手机号校验
        $("#phonenum").focusin(function(){
            $(".ph-message p").eq(0).show().end().css({"border-color":"#999","color":"#999","background":"#f7f7f7"});
        })
        $("#phonenum").focusout(function(){
            $(".ph-message p").css({"border-color":"red","color":"red","background":"#FFEBEB"});
        })

        $("#phonenum").change(function(){
            checkform("phonenum",".ph-message");
            
        })
        // 密码校验
        $("#pass").focusin(function(){
            $(".sm-message p").eq(0).show().end().css({"border-color":"#999","color":"#999","background":"#f7f7f7"});
        })
        $("#pass").focusout(function(){
            $(".sm-message p").css({"border-color":"red","color":"red","background":"#FFEBEB"});
        })
        $("#pass").change(function(){
            checkmi("pass",".sm-message");
        })
        // 确认密码
        $("#checkpass").focusin(function(){
            $(".cm-message p").eq(0).show().end().css({"border-color":"#999","color":"#999","background":"#f7f7f7"});
        })
        $("#checkpass").focusout(function(){
            $(".cm-message p").css({"border-color":"red","color":"red","background":"#FFEBEB"});
        })
        $("#checkpass").change(function(){
            // checkmi("checkpass",".cm-message");
            let pass = $("#pass").val();
            let checkp = $("#checkpass").val();
            if (pass!==checkp) {
                // 错误信息出现 提示信息消失
                $(".cm-message p").eq(1).css({"border-color":"red","color":"red"}).show().siblings().hide(); 
                flagcheckpass = false;
            }
            if (pass==checkp) {
                $(".cm-message p").hide();
                flagcheckpass = true;
            }
        })
        // 协议是否勾选
        var isgou  = $("#checkbox").prop("checked");
        $("#checkbox").change(function(){
            var isgou  = $("#checkbox").prop("checked");
            if(isgou==false) {
                $(".cp-message p").css({"border-color":"red","color":"red","background":"#FFEBEB"}).show();
                flagcheckbox = false;
            }
            if(isgou==true) {
                $(".cp-message p").hide();
                flagcheckbox = true;
            }
            // console.log(flagcheckbox);
        })
    //  滑块验证js实现
    window.onload = function () {
  // 封装-选择器,内部可以做兼容性
    function querySelect(name) {
        return document.querySelector(name)
  }
  // 验证成功
  // 验证失败
  // 触发事件 onmousedown按下  onmousemove移动  onmouseup松开
    btn = querySelect('.btn') // 滑块  对IE6/7 有兼容性问题
  let box = querySelect('.box') // box
  let text = querySelect('.text') // 文字
   bg = querySelect('.bg') // 背景
  btn.onmousedown = (eventDown) => {
    // event.clientX;clientY   鼠标当前X轴Y轴坐标
    let downX = eventDown.clientX;
    // console.log(downX)
    document.onmousemove = (eventMove) => {
      // 移动的X坐标 - 按下的X坐标
      let moveX = eventMove.clientX - downX ;
      let boxWidth = box.offsetWidth;
      let btnWidth = btn.offsetWidth;
      if (moveX >= 0 && moveX <= (boxWidth - btnWidth)) { // 可移动的范围
        btn.style.left = moveX + 'px' ;// 滑块绝对定位
        bg.style.width = moveX + 'px'; // 设备背景的宽度
      }
      if (moveX >= (boxWidth - btnWidth)) {
        btn.style.left = (boxWidth - btnWidth) + 'px'; // 滑块绝对定位
        bg.style.width = (boxWidth - btnWidth) + 'px' ;// 设备背景的宽度
        // 文字提醒
        text.innerText = '验证成功';
        flagbox = true;
        // 
        text.style.color = '#fff';
        // 事件清除-按下、移动  
        btn.onmousedown = null;
        document.onmousemove = null;
        btn.onmouseup = null;
      }
    }
  }
  btn.onmouseup = (eventUp) => {
      flagbox = false;
    // 松开后回到原点
    // 清除移动事件
    btn.style.left = 0 + 'px'
    bg.style.width = 0 + 'px'
    document.onmousemove = null;
  }
}

        // 提交
        // 提交判断
        
        $("#regbtn").click(function(){
            if(flagbox&&flagcheckbox&&flagcheckpass&&flagpass&&flagphone){
                let flag = true;
                //  利用jquery ajax 调用接口 
                $.ajax({
                    // 在json-server生成的接口
                    url:"http://localhost:3000/user",
                    type:"get",
                    success:function(data){
                        console.log(data);
                        // 遍历数据中的手机号 
                        for(let i = 0;i < data.length;i++){
                                var dataphone = data[i]["phone"];
                                var userphone = $("#phonenum").val();
                                var userpass = $("#pass").val();
                            //判断手机号是否已经注册过了 如果匹配到注册过
                                if(dataphone == userphone){
                                    flag = false;
                                    alert("您已经注册过了，请直接登陆！！");
                                    location.reload();
                                    window.open("login.html");
                                
                                }
                        }
                        // 如果没注册过，则将用户手机号和密码插入到data.json的user数据中
                        if(flag){
                            var newobj = {"phone":1111,"password":1111};
                            axios.post("http://localhost:3000/user", {"phone": userphone, "password": userpass})
                                .then(function (data) {
                                    alert("注册成功，正在跳转登录...");
                                    window.open("login.html");
                                    })
                                .catch(function () {
                                    console.log("请求失败");
                                })
                        }
                    }
                })
            }else{
                alert("请完善信息！");
            }
            
        })

</script>
</body>
</html>